<template>
  <el-form
  style="margin-top:100px"
    :model="dataForm"
    :rules="dataRule"
    ref="dataForm"
    label-width="150px"
  >
      <el-form-item label="分账类型：" prop="actTyp">
        <el-radio-group
          v-model="dataForm.actTyp"
          aria-placeholder="请选择资质类型" @change="changeType" >
          <el-radio label="01">企业</el-radio>
          <el-radio label="02">个人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户名：" prop="names" v-if="dataForm.actTyp=='02'">
         <el-select v-model="dataForm.names" filterable placeholder="请选择,可根据用户名或者手机号搜索" @change="changeNames"   style=" width: 300px;">
            <el-option
              v-for="item in options"
              :label="item.nickName+'_'+item.phonenumber"
              :value="item.openId+',@#'+item.nickName+',@#'+item.phonenumber">
            </el-option>
          </el-select>
         </el-form-item>
         <el-form-item label="企业名称" prop="identityName1" v-if="dataForm.actTyp=='01'">
           <el-input v-model="dataForm.identityName1"  placeholder="请输入企业名称" />
         </el-form-item>
         <el-form-item label="随行付商户号" prop="mercNo" v-if="dataForm.actTyp=='01'">
           <el-input v-model="dataForm.mercNo"  placeholder="请输入随行付商户号" />
         </el-form-item>
          <el-form-item label="用户真实姓名" prop="identityName2" v-if="dataForm.actTyp=='02'">
            <el-input v-model="dataForm.identityName2"  placeholder="请输入用户真实姓名" />
          </el-form-item>
          <el-form-item label="微信openid" v-if="dataForm.openid"  prop="openid">
            <el-input v-model="dataForm.openid"  :disabled="true"   />
          </el-form-item>
          <el-form-item label="手机号" v-if=" dataForm.actTyp=='02'"  prop="mblNo">
            <el-input v-model="dataForm.mblNo"   />
          </el-form-item>
          <el-form-item label="联系电话"v-if="dataForm.actTyp=='01'" prop="mblNo">
            <el-input v-model="dataForm.mblNo"  />
          </el-form-item>
    <el-form-item style="margin: 30px auto 0 -200px; text-align: center">
      <el-button
        type="primary"
        :loading="buttonLoad"
        @click="submit"  > 确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { listUser } from "../../../api/system/user";
import {
  list,
  add,
  del,
  update,
  detail,
  inquire,
  getlbk,
} from "@/api/app_pages/separateUser";
import { getToken } from "@/utils/auth";
import request from '@/utils/request'
import axios from 'axios'
export default {
  data() {
    return {
      options:[],
      dataForm: {
        actTyp:'01',
      },
      buttonLoad: false,
    };
  },
  computed: {
    dataRule() {
      return {
        actTyp:[
          { required: true, message: "请选择分账类型", trigger: "blur" },
        ],
        names: [
          { required: true, message: "请选择用户名", trigger: "blur" },
        ],
        identityName1:[
          { required: true, message: "请填写企业名称", trigger: "blur" },
        ],
        identityName2:[
          { required: true, message: "请填写微信实名制名称", trigger: "blur" },
        ],
        openid: [
          { required: true, message: "请添加微信id", trigger: "blur" },
        ],
        mercNo: [
          { required: true, message: "请填写随行付商户号", trigger: "blur" },
        ],
        mblNo:[
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ]
      };
    },
  },
  methods: {
    submit() {
      const that = this;
      this.$refs.dataForm.validate((valid) => {
        if (!valid) return this.$message.error("必填参数不能为空");
        that.buttonLoad = true;
        let Ajax = {}
        if(that.dataForm.actTyp == '01'){
          Ajax.identityName = that.dataForm.identityName1
          Ajax.mblNo = that.dataForm.mblNo
          Ajax.mercNo = that.dataForm.mercNo
          Ajax.actTyp = that.dataForm.actTyp
        }else if(that.dataForm.actTyp == '02'){
          Ajax.identityName = that.dataForm.identityName2
          Ajax.mblNo = that.dataForm.mblNo
          Ajax.openId = that.dataForm.openid
          Ajax.actTyp = that.dataForm.actTyp
        }

        // axios({
        //   method: 'post',
        //   url: '/prod-api/separate/user',
        //   params:Ajax,
        // }).then(res => {
        //      that.buttonLoad = false;
        //      if (res.data.code !== 200){
        //         that.$message.error(res.data.msg);
        //      } else{
        //         that.$message.success(res.data.msg);
        //      }
        //    }, error => {
        //        that.buttonLoad = false;
        //   }).cath(function () {
        //     that.buttonLoad = false;
        //  });

        add(Ajax).then((res) => {
            that.buttonLoad = false;
            if (res.code !== 200){
               that.$message.error(res.msg);
            } else{
               that.$message.success(res.msg);
            }
           }, error => {
               that.buttonLoad = false;
          })
          .cath(function () {
            that.buttonLoad = false;
          });
      });
    },
    changeNames(data){
      if(data){
        let item = data.split(',@#')
        if(!item[0] || !item[2] || item[0]=='null'|| item[2]=='null'){
          this.$message.warning("不能添加,先登录小程序授权手机号!");
          this.dataForm.names = ''
          return
        }
        this.dataForm.openid = item[0]
        this.dataForm.mblNo = item[2]
      }

      console.log(data)
    },
    changeType(data){
        this.dataForm={
          actTyp:data
        }
    }
  },
  created() {
    listUser({pageNum:1,pageSize:99999}).then((res) => {
        this.options = res.rows
    })
  },
};
</script>
<style scoped>
.step_class {
  width: 90%;
  margin-top: 30px;
  margin-left: 5%;
  margin-bottom: 20px;
}
.input {
  width: 50%;
}
.warn {
  color: brown;
}
</style>
